@use 'sass:list';

@mixin e($line-clamp: 1) {
  overflow: hidden;
  text-overflow: ellipsis;

  @if $line-clamp ==1 {
    white-space: nowrap;
    display: block;
  }

  @else {
    display: -webkit-box;
    -webkit-line-clamp: $line-clamp;
    -webkit-box-orient: vertical;
  }
}

@mixin locate($gap: 0) {
  top: $gap;
  right: $gap;
  bottom: $gap;
  left: $gap;
}

@mixin gradientFont() {
  background: var(--color);
  color: transparent;
  background-clip: text;
}

@mixin gradientStroke() {
  background: var(--stroke-color) 0 0 / 100% 100%;
  -webkit-text-stroke: 2rpx transparent;
  background-clip: text;
}

@mixin gradientBorder($is-child: false) {
  border: 2rpx solid transparent;
  background: var(--border-color) no-repeat;
  background-origin: border-box;
  $mask-bg: linear-gradient(red, blue);
  mask-image: $mask-bg, $mask-bg;
  mask-clip: padding-box, border-box;
  mask-composite: subtract;

  @if $is-child ==true {
    content: '';
    position: absolute;
    @include locate();
    box-sizing: border-box;
    display: block;
    border-radius: inherit;
    pointer-events: none;
  }
}

@mixin boxShadow($count: 1) {
  $keys: shadow-position shadow-x shadow-y shadow-blur shadow-spread shadow-color;
  $list: ();

  @if $count >1 {
    @for $index from 1 through $count {
      $clist: ();
      @each $item in $keys {
        --#{$item + $index}: ;
        $clist: list.append($clist, var(--#{$item + $index}));
      }
      $list: list.append($list, $clist, comma);
    }
  }

  @else {
    @each $item in $keys {
      --#{$item}: ;
      $list: list.append($list, var(--#{$item}));
    }
  }

  box-shadow: $list;
}